
import {
    Divider,
    ColorPicker,
    Input,
    InputNumber,
    Select,
    Radio
} from 'antd'


import { themeStore } from '../Config/zustand'

import { FontFamilyMapping, FontWeightMapping, FontStyleMapping, BoxShadowMapping } from '../Config/theme'

const isFoldMapping = [
    { value: false, label: '展开' },
    { value: true, label: '折叠' },
]

const SetSystemMENU = () => {

    const { menu, updateMenu } = themeStore()
    const { isFold, menuBack, menuPx, menuRadio, menuShadow } = menu
    const { fontColor, fontFamily, fontWeight, fontStyle, fontSize, fontShadowX, fontShadowY, fontShadowS, fontShadowB } = menu
    const { iconSize, iconIndex, iconShadowX, iconShadowY, iconShadowS, iconShadowB } = menu

    const MenuFunc = (key, value) => {
        menu[key] = value
        updateMenu(menu)
    }


    return (
        <div className='SetSystemMENU'>
            <Divider orientation="left" >菜单设置</Divider>
            <div className='Content'>
                <div>
                    <div className='title'>整体设置</div>
                    <div className='Label' >
                        <div>默认状态</div>
                        <Radio.Group value={isFold} buttonStyle="solid" onChange={e => MenuFunc('isFold', e.target.value)}>
                            {isFoldMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Label'>
                        <div>背景颜色</div>
                        <ColorPicker value={menuBack} onChangeComplete={e => MenuFunc('menuBack', e.toHexString())} />
                    </div>
                    <div className='Label' >
                        <div>遮罩比例</div>
                        <InputNumber value={menuPx} onChange={e => MenuFunc('menuPx', e)} />
                    </div>
                    <div className='Label' >
                        <div>圆角尺寸</div>
                        <InputNumber value={menuRadio} onChange={e => MenuFunc('menuRadio', e)} />
                    </div>
                    <div className='Label'>
                        <div>边框阴影</div>
                        <Select value={menuShadow} options={BoxShadowMapping} onChange={e => MenuFunc('menuShadow', e)} />
                    </div>
                </div>
                <div>
                    <div className='title'>文字图标</div>
                    <div className='Label'>
                        <div>文字颜色</div>
                        <ColorPicker value={fontColor} onChangeComplete={e => MenuFunc('fontColor', e.toHexString())} />
                    </div>
                    <div className='Label'>
                        <div>文字字体</div>
                        <Select value={fontFamily} options={FontFamilyMapping} onChange={e => MenuFunc('fontFamily', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字加粗</div>
                        <Select value={fontWeight} options={FontWeightMapping} onChange={e => MenuFunc('fontWeight', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字倾斜</div>
                        <Select value={fontStyle} options={FontStyleMapping} onChange={e => MenuFunc('fontStyle', e)} />
                    </div>
                    <div className='Label' >
                        <div>文字字号</div>
                        <InputNumber value={fontSize} onChange={e => MenuFunc('fontSize', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影X轴</div>
                        <InputNumber value={fontShadowX} onChange={e => MenuFunc('fontShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影Y轴</div>
                        <InputNumber value={fontShadowY} onChange={e => MenuFunc('fontShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影尺寸</div>
                        <InputNumber value={fontShadowS} onChange={e => MenuFunc('fontShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>阴影颜色</div>
                        <ColorPicker value={fontShadowB} onChangeComplete={e => MenuFunc('fontShadowB', e.toHexString())} />
                    </div>
                </div>

                <div>
                    <div className="title">图标设置</div>
                    <div className='Label' >
                        <div>图标尺寸</div>
                        <InputNumber value={iconSize} onChange={e => MenuFunc('iconSize', e)} />
                    </div>
                    <div className='Label' >
                        <div>图标间距</div>
                        <InputNumber value={iconIndex} onChange={e => MenuFunc('iconIndex', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影X轴</div>
                        <InputNumber value={iconShadowX} onChange={e => MenuFunc('iconShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影Y轴</div>
                        <InputNumber value={iconShadowY} onChange={e => MenuFunc('iconShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影尺寸</div>
                        <InputNumber value={iconShadowS} onChange={e => MenuFunc('iconShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>阴影颜色</div>
                        <ColorPicker value={iconShadowB} onChangeComplete={e => MenuFunc('iconShadowB', e.toHexString())} />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default SetSystemMENU;